import React, {Component} from 'react';

require('./css/frame.css');

class Div0 extends Component{
    onClick(){
        this.props.nexPage();
    }
    render() {
        return (
            <div>
                <div className='ldiv'>
                    <p className="lrp">MIB显示屏</p>
                    <div className="div0">
                        <img src={require("./img/60.jpg")} />
                        <p>在导航高级设置内勾选中“自动发起步行导航功能”</p>
                        <div className="btnDiv" id="btnDiv0" onClick={this.onClick.bind(this)}>
                            <img  src={require("./img/bgred.png")}  />
                        </div>
                    </div>
                </div>
                <div className='rdiv'>
                    <p className="lrp">手机页面</p>
                </div>
            </div>
        )
    }
}

class Div1 extends Component{
    onClick(){
        this.props.nexPage();
    }
    render() {
        return (
            <div>
                <div className='ldiv'>
                    <p className="lrp">MIB显示屏</p>
                    <div className="div0">
                        <img src={require("./img/60.jpg")} />
                        <p>在导航高级设置内勾选中“自动发起步行导航功能”</p>

                    </div>
                </div>
                <div className='rdiv'>
                    <p className="lrp">手机页面</p>
                    <div className="div1">
                        <img src={require("./img/61.jpg")}/>
                        <p>进入手机APP，当手机显示与车机连接后，点击地址发送功能。</p>
                        <div className="btnDiv" id="btnDiv1" onClick={this.onClick.bind(this)}>
                            <img src={require("./img/bgred.png")}/>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}


class Div2 extends Component{
    onClick(){
        this.props.nexPage();
    }
    render() {
        return (
            <div>
                <div className='ldiv'>
                    <p className="lrp">MIB显示屏</p>
                    <div className="div0">
                        <img src={require("./img/60.jpg")} />
                        <p>在导航高级设置内勾选中“自动发起步行导航功能”</p>

                    </div>
                </div>
                <div className='rdiv'>
                    <p className="lrp">手机页面</p>
                    <div className="div2">
                        <img src={require("./img/62.jpg")} />
                        <p>进入APP地址搜索界面，可在点击搜索框搜索目标地址，或点击发送历史、收藏夹查找已发送地址或收藏地址。</p>
                        <div className="btnDiv" id="btnDiv2" onClick={this.onClick.bind(this)}>
                            <img  src={require("./img/bgred.png")}  />
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}


class Div3 extends Component{
    onClick(){
        this.props.nexPage();
    }
    render() {
        return (
            <div>
                <div className='ldiv'>
                    <p className="lrp">MIB显示屏</p>
                    <div className="div0">
                        <img src={require("./img/60.jpg")} />
                        <p>在导航高级设置内勾选中“自动发起步行导航功能”</p>

                    </div>
                </div>
                <div className='rdiv'>
                    <p className="lrp">手机页面</p>
                    <div className="div3">
                        <img src={require("./img/63.jpg")} />
                        <p>输入目标地址或使用便捷查找功能查找停车场等地址。</p>
                        <div className="btnDiv" id="btnDiv3" onClick={this.onClick.bind(this)}>
                            <img  src={require("./img/bgred.png")}  />
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}


class Div4 extends Component{
    onClick(){
        this.props.nexPage();
    }
    render() {
        return (
            <div>
                <div className='ldiv'>
                    <p className="lrp">MIB显示屏</p>
                    <div className="div0">
                        <img src={require("./img/60.jpg")} />
                        <p>在导航高级设置内勾选中“自动发起步行导航功能”</p>

                    </div>
                </div>
                <div className='rdiv'>
                    <p className="lrp">手机页面</p>
                    <div className="div4">
                        <img src={require("./img/64.jpg")} />
                        <p>选取地址后点击“发送地址”。</p>
                        <div className="btnDiv" id="btnDiv4" onClick={this.onClick.bind(this)}>
                            <img  src={require("./img/bgred.png")}  />
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}


class Div5 extends Component{
    onClick(){
        this.props.nexPage();
    }
    render() {
        return (
            <div>
                <div className='ldiv'>
                    <p className="lrp">MIB显示屏</p>
                    <div className="div6">
                        <img src={require("./img/66.jpg")} />
                        <p>车机接收到手机发送的目标地之后弹出对话框，可点击“开始导航”进入导航功能或查看目标地址详细信息；
                            也可在导航收藏夹内，选择“来自手机”，选取目标地址。</p>
                        <div className="btnDiv" id="btnDiv6" onClick={this.onClick.bind(this)}>
                            <img  src={require("./img/bgred.png")}  />
                        </div>
                    </div>
                </div>
                <div className='rdiv'>
                    <p className="lrp">手机页面</p>
                    <div className="div5">
                        <img src={require("./img/65.jpg")} />
                        <p>发送成功后界面提示“发送成功“。</p>
                    </div>
                </div>
            </div>
        )
    }
}




class Div6 extends Component{
    onClick(){
        this.props.nexPage();
    }
    render() {
        return (
            <div>
                <div className='ldiv'>
                    <p className="lrp">MIB显示屏</p>
                    <div className="div7">
                        <img src={require("./img/67.jpg")} />
                        <p>进入导航功能后，导航系统计算出形式路径以供选择，选择合适路线点击“开始导航”，进入导航功能。</p>
                        <div className="btnDiv" id="btnDiv11" onClick={this.onClick.bind(this)}>
                            <img  src={require("./img/bgred.png")}  />
                        </div>
                    </div>
                </div>
                <div className='rdiv'>
                    <p className="lrp">手机页面</p>
                    <div className="div5">
                        <img src={require("./img/65.jpg")} />
                        <p>输入目标地址或使用便捷查找功能查找停车场等地址。</p>
                    </div>
                </div>
            </div>
        )
    }
}

class Div7 extends Component{
    onClick(){
        this.props.nexPage();
    }
    render() {
        return (
            <div>
                <div className='ldiv'>
                    <p className="lrp">MIB显示屏</p>
                    <div className="div7">
                        <img src={require("./img/67.jpg")} />
                        <p>进入导航功能后，导航系统计算出形式路径以供选择，选择合适路线点击“开始导航”，进入导航功能。</p>

                    </div>
                </div>
                <div className='rdiv'>
                    <p className="lrp">手机页面</p>
                    <div className="div8">
                        <img src={require("./img/68.jpg")} />
                        <p>行驶至距离目标地址50m-2km时，导航将位置信息发送至APP端，待停车后，点击APP“到这去”，进入APP地图。</p>
                        <div className="btnDiv" id="btnDiv8" onClick={this.onClick.bind(this)}>
                            <img  src={require("./img/bgred.png")}  />
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
class Div8 extends Component{
    onClick(){
        this.props.nexPage();
    }
    render() {
        return (
            <div>
                <div className='ldiv'>
                    <p className="lrp">MIB显示屏</p>
                    <div className="div7">
                        <img src={require("./img/67.jpg")} />
                        <p>进入导航功能后，导航系统计算出形式路径以供选择，选择合适路线点击“开始导航”，进入导航功能。</p>
                    </div>
                </div>
                <div className='rdiv'>
                    <p className="lrp">手机页面</p>
                    <div className="div9">
                        <img src={require("./img/69.jpg")} />
                        <p>点击“开始导航”，利用APP地图导航至目标地址；
                            点击“其他导航”，利用手机其他导航至目标地址。</p>
                    </div>
                </div>
            </div>
        )
    }
}


const Divs=[Div0,Div1,Div2,Div3,Div4,Div5,Div6,Div7,Div8];


export { Divs }


